<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录 - 乒乓球培训管理系统</title>

    <!-- Bootstrap 5 CSS -->
    <link href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link href="{{ url_for('static', filename='vendor/bootstrap-icons/css/bootstrap-icons.css') }}" rel="stylesheet">

    <style>
        body {
            background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
            min-height: 100vh;
            margin: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .login-wrapper {
            min-height: 100vh;
            display: flex;
        }

        /* 左侧品牌展示区 */
        .brand-section {
            flex: 1;
            background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .brand-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }

        .brand-content {
            text-align: center;
            z-index: 1;
            max-width: 500px;
            padding: 2rem;
        }

        .brand-logo {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }

        .brand-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .brand-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .feature-list {
            text-align: left;
            max-width: 300px;
            margin: 0 auto;
        }

        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            opacity: 0.9;
        }

        .feature-item i {
            font-size: 1.2rem;
            margin-right: 0.75rem;
            width: 20px;
        }

        /* 右侧登录表单区 */
        .login-section {
            flex: 1;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .login-container {
            width: 100%;
            max-width: 400px;
        }

        .login-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .login-header h3 {
            color: #2c3e50;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .login-header p {
            color: #6c757d;
            margin-bottom: 0;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            font-weight: 500;
            color: #2c3e50;
            margin-bottom: 0.5rem;
        }

        .form-control {
            border: 2px solid #e9ecef;
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-control:focus {
            border-color: #0072ff;
            box-shadow: 0 0 0 0.2rem rgba(0, 114, 255, 0.25);
        }

        .input-group-text {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-right: none;
            color: #6c757d;
        }

        .input-group .form-control {
            border-left: none;
        }

        .input-group:focus-within .input-group-text {
            border-color: #0072ff;
        }

        .btn-login {
            background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
            border: none;
            padding: 0.75rem 1.5rem;
            font-weight: 600;
            font-size: 1rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            width: 100%;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(0, 114, 255, 0.4);
        }

        .form-check {
            margin-bottom: 1.5rem;
        }

        .form-check-input:checked {
            background-color: #0072ff;
            border-color: #0072ff;
        }

        .register-links {
            text-align: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #e9ecef;
        }

        .register-links p {
            color: #6c757d;
            margin-bottom: 1rem;
        }

        .register-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn-register {
            flex: 1;
            padding: 0.6rem 1rem;
            border-radius: 6px;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .btn-student {
            background: #28a745;
            color: white;
        }

        .btn-coach {
            background: #17a2b8;
            color: white;
        }

        .btn-register:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            color: white;
            text-decoration: none;
        }

        .system-info {
            text-align: center;
            margin-top: 2rem;
            color: #6c757d;
            font-size: 0.875rem;
        }

        .invalid-feedback {
            display: block;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .login-wrapper {
                flex-direction: column;
            }

            .brand-section {
                min-height: 40vh;
                padding: 1rem;
            }

            .brand-title {
                font-size: 2rem;
            }

            .brand-subtitle {
                font-size: 1rem;
            }

            .feature-list {
                display: none;
            }

            .login-section {
                padding: 1rem;
            }

            .register-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="login-wrapper">
        <!-- 左侧品牌展示区 -->
        <div class="brand-section">
            <div class="brand-content">
                <div class="brand-logo">
                    <i class="bi bi-disc"></i>
                </div>
                <h1 class="brand-title">乒乓球培训系统</h1>
                <p class="brand-subtitle">专业的乒乓球培训管理平台，连接学员、教练与优质教学资源</p>

                <div class="feature-list">
                    <div class="feature-item">
                        <i class="bi bi-people-fill"></i>
                        <span>师生双选系统</span>
                    </div>
                    <div class="feature-item">
                        <i class="bi bi-calendar-check"></i>
                        <span>智能预约管理</span>
                    </div>
                    <div class="feature-item">
                        <i class="bi bi-credit-card"></i>
                        <span>便捷支付系统</span>
                    </div>
                    <div class="feature-item">
                        <i class="bi bi-star"></i>
                        <span>课程评价反馈</span>
                    </div>
                    <div class="feature-item">
                        <i class="bi bi-shield-check"></i>
                        <span>多校区管理</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧登录表单区 -->
        <div class="login-section">
            <div class="login-container">
                <!-- 登录头部 -->
                <div class="login-header">
                    <h3>用户登录</h3>
                    <p>请使用用户名或手机号登录系统</p>
                </div>

                <!-- Flash消息显示 -->
                {% include 'components/alerts.html' %}

                <!-- 登录表单 -->
                <form method="POST" novalidate>
                    {{ form.hidden_tag() }}

                    <!-- 用户名输入 -->
                    <div class="form-group">
                        <label for="{{ form.username.id }}" class="form-label">{{ form.username.label.text }}</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-person"></i>
                            </span>
                            {{ form.username(class="form-control" + (" is-invalid" if form.username.errors else "")) }}
                        </div>
                        {% if form.username.errors %}
                            <div class="invalid-feedback">
                                {% for error in form.username.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <!-- 密码输入 -->
                    <div class="form-group">
                        <label for="{{ form.password.id }}" class="form-label">{{ form.password.label.text }}</label>
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="bi bi-lock"></i>
                            </span>
                            {{ form.password(class="form-control" + (" is-invalid" if form.password.errors else "")) }}
                        </div>
                        {% if form.password.errors %}
                            <div class="invalid-feedback">
                                {% for error in form.password.errors %}
                                    {{ error }}
                                {% endfor %}
                            </div>
                        {% endif %}
                    </div>

                    <!-- 记住我选项 -->
                    <div class="form-check">
                        {{ form.remember_me(class="form-check-input") }}
                        <label class="form-check-label" for="{{ form.remember_me.id }}">
                            {{ form.remember_me.label.text }}
                        </label>
                    </div>

                    <!-- 登录按钮 -->
                    <div class="d-grid">
                        {{ form.submit(class="btn btn-primary btn-login") }}
                    </div>
                </form>

                <!-- 注册链接 -->
                <div class="register-links">
                    <p>还没有账号？</p>
                    <div class="register-buttons">
                        <a href="{{ url_for('auth.student_register') }}" class="btn btn-student btn-register">
                            <i class="bi bi-mortarboard me-1"></i>学员注册
                        </a>
                        <a href="{{ url_for('auth.coach_register') }}" class="btn btn-coach btn-register">
                            <i class="bi bi-person-check me-1"></i>教练申请
                        </a>
                    </div>
                </div>

                <!-- 系统信息 -->
                <div class="system-info">
                    <i class="bi bi-shield-check me-2"></i>
                    乒乓球培训管理系统 v1.0<br>
                    <small>安全登录 · 数据保护</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>

    <!-- 自定义JavaScript -->
    <script>
        // 自动聚焦到用户名输入框
        document.addEventListener('DOMContentLoaded', function() {
            const usernameInput = document.getElementById('username');
            if (usernameInput) {
                usernameInput.focus();
            }
        });

        // 表单提交时显示加载状态
        document.querySelector('form').addEventListener('submit', function() {
            const submitBtn = document.querySelector('.btn-login');
            const originalText = submitBtn.textContent;
            submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>登录中...';
            submitBtn.disabled = true;

            // 如果表单验证失败，恢复按钮状态
            setTimeout(function() {
                if (document.querySelector('.is-invalid')) {
                    submitBtn.textContent = originalText;
                    submitBtn.disabled = false;
                }
            }, 100);
        });
    </script>
</body>
</html>
